import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.less'
import CustomSlider from '@/components/CustomSlider'
import { history, useParams } from 'umi'
import Store from './store'
import { observer, useLocalObservable } from 'mobx-react'
import PageLoading from '@/components/Global/PageLoading'
import BtnBotLayout from '@/components/BtnBotLayout'
import { Toast } from 'antd-mobile'
import { toJS } from 'mobx'
import { SocketContainer } from '@/hooks/useSocket'

const sortNum = '0①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿'

function Exam() {
    const { id } = useParams<any>()
    const store = useLocalObservable(() => Store)
    const { lot_arr, setData } = store
    const { send, onMessage, remove } = SocketContainer.useContainer()
    /** 剩余待使用金额 */
    const rest = lot_arr?.reduce((pre, cur) => pre - (cur.value || 0), 1000)
    const lotArrRef = useRef(lot_arr)

    useEffect(() => {
        lotArrRef.current = lot_arr
    }, [lot_arr])

    /** 提交 */
    const submit = (submit_type = '1') => {
        send('submit', {
            params: {
                submit_type,
                auction_form_arr: lotArrRef?.current?.map(item => {
                    return {
                        id: item.id,
                        price: item?.value || 0,
                    }
                }),
            },
        })
    }

    useEffect(() => {
        document.title = '拍卖表'
        /** 自动提交 */
        function autoSubmit({ data }: any) {
            if (data.goto === 'submit') {
                submit('2')
            }
        }
        /** 接收提交成功 */
        function submitSuccess() {
            history.replace(`/auction/statistics/${id}`)
        }
        onMessage('step_flow', autoSubmit)
        onMessage('submit', submitSuccess)
        return () => {
            document.title = ''
            remove('step_flow', autoSubmit)
        }
    }, [])

    if (!lot_arr?.length) {
        return <PageLoading />
    }

    return (
        <div className={styles.layout_container}>
            <BtnBotLayout
                footer={
                    <div className={styles.footer}>
                        <div className={styles.rest_money}>剩余金额：{rest}万</div>
                        <div
                            className={styles.save_btn}
                            onClick={() => {
                                if (rest !== 0) {
                                    Toast.show(`你还有${rest}W金额未支配，请完成支配后再进行提交`)
                                    return
                                }
                                submit()
                            }}
                        >
                            提交
                        </div>
                    </div>
                }
            >
                <div className={styles.container}>
                    <div className={styles.wrapper}>
                        <div className={styles.explain}>
                            实训说明： <br />
                            请各位学员首先自行填写《职业价值观拍卖表》预算金额，填写结束后，根据统计数据，每项拍的人数，多少人超过你的金额来评估自己对职业价值的判断；（请合理分配自己的有限金额！）
                        </div>
                        {lot_arr?.map((item: any, idx: number) => {
                            return (
                                <div key={item.id} className={styles.ques_wrapper}>
                                    <div className={styles.ques_title}>
                                        价值观商品{sortNum.split('')[item?.sort]}：{item?.describe}
                                    </div>
                                    <CustomSlider
                                        unit="万"
                                        max={1000}
                                        step={10}
                                        value={Number(item.value || 0)}
                                        onChange={(val: any) => {
                                            const temp = [...toJS(lot_arr)]
                                            const restMoney = lot_arr?.reduce((pre, cur, index) => {
                                                if (index === idx) {
                                                    return pre
                                                }
                                                return pre - (cur.value || 0)
                                            }, 1000)
                                            if (restMoney >= val) {
                                                temp[idx].value = val
                                                setData('lot_arr', temp)
                                            } else {
                                                temp[idx].value = restMoney
                                                setData('lot_arr', temp)
                                            }
                                        }}
                                    />
                                </div>
                            )
                        })}
                    </div>
                </div>
            </BtnBotLayout>
        </div>
    )
}

export default observer(Exam)
